<template>
	<view>
		<uniNavBar></uniNavBar>
		<!-- 关闭按钮 -->
		<view>
			<view class="iconfont icon-guanbi  flex align-center  justify-center font-lg" hover-class="bg-light"
				style="height: 100rpx; width: 100rpx;" @click="back"></view>
		</view>
		<!-- 表单 -->
		<view class="text-center text-dark" style="font-size:55rpx ; padding-top: 170rpx; padding-bottom: 30rpx;">
			{{status ? '手机验证码登录' :'账号密码登录'}}
		</view>
		<view class="pb-4 pt-3 px-2">
			<template v-if="status">
				<view class="p-2 border-bottom flex align-stretch">
					<view class="flex justify-center align-center font-weight-bold mr-2">
						+86
					</view>
					<input class="flex-1" type="text" v-model="phone" placeholder="手机号验证码登录" />
				</view>
				<view class="p-2 flex align-stretch border-bottom">
					<input type="text" placeholder="请输入验证码" v-model="code" class="flex-1" />
					<view class="flex justify-center align-center" @click="getCode"
						:class="codetime > 0 ? 'text-light-muted':'text-main'">
						{{codetime > 0 ? codetime + ' s' : '获取验证码'}}
					</view>
				</view>
			</template>
			<template v-else>
				<view class="p-2 border-bottom">
					<input type="text" placeholder="昵称/手机号/邮箱" v-model="username" />
				</view>
				<view class="p-2 flex align-stretch border-bottom">
					<input type="text" placeholder="请输入密码" v-model="password" class="flex-1" />
					<view class="flex justify-center align-center text-light-muted">
						忘记密码
					</view>
				</view>
			</template>

		</view>
		<!-- 登录按钮 -->
		<view class="pt-4 px-2">
			<button class="text-white text-center" style="border-radius: 50rpx;"
				:class="isDisable ? 'bg-main-disabled' : 'bg-main '" @click="submit">
				{{loading ? '登录中..':'登录'}}
			</button>
		</view>
		<!-- 登陆遇到问题 -->
		<view class="flex justify-center align-center py-4">
			<view class="text-primary font-sm" @click="changeStatus">
				{{status ? '账号登录' : '验证码登录'}}
			</view>
			<view class="text-light-muted mx-2">
				|
			</view>
			<view class="text-primary font-sm">
				登录遇到问题
			</view>
		</view>
		<!-- 社交账号登录 -->
		<view class=" flex justify-center align-center">
			<view  style="height: 1px;width: 100rpx; background-color: #A9A5A0;">
			</view>
			<view class="text-light-muted mx-1">
				社交账号登录
			</view>
			<view style="height: 1px;width: 100rpx; background-color: #A9A5A0;">
			</view>
		</view>
		<!-- 第三方登录 -->
		<otherLogin :back="true"></otherLogin>
		<!-- 社区协议 -->
		<view class="text-light-muted text-center">
			注册即代表您同意
			 <text class="text-primary">
				社区协议
			</text>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue'
	import otherLogin from '@/components/common/other-login.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			uniNavBar,
			otherLogin
		},
		data() {
			return {
				status: false, //账号密码登录
				phone: '',
				code: '',
				username: '',
				password: '',
				codetime: 0, //验证码倒计时
				loading:false

			}
		},
		onLoad() {

		},
		computed: {
			...mapState({
				loginStuatus: state => state.loginStuatus
			}),
			isDisable() {
				if ((this.phone === '' || this.code === '') && (this.username === '' || this.password === '')) {
					return true
				}
				return false
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			//切换登录方式
			changeStatus() {
				this.phone = ""
				this.code = ""
				this.username = ""
				this.password = ""
				this.status = !this.status
			},
			//获取验证码
			getCode() {
				if (this.codetime > 0) {
					return
				}
				if (!this.isCheck()) return;
				this.$H.post('/user/sendcode', {
					phone: this.phone
				}, {
					nactive: true
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
					this.codetime = 60
					let timer = setInterval(() => {
						if (this.codetime >= 1) {
							this.codetime--
						} else {
							this.codetime = 0
							clearInterval(timer)
						}

					}, 1000)
				})
			},
			//校验
			isCheck() {
				//手机号校验
				let phoneregs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
				if (!phoneregs.test(this.phone)) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'none'
					});
					return false
				}
				return true
			},
			//登录
			submit() {
				this.loading = true
				let url = ""
				let data = {}
				if (this.status) {
					if (!this.isCheck()) return;
					url = '/user/phonelogin'
					data = {
						phone: this.phone,
						code: this.code
					}
				} else {
					url = '/user/login'
					data = {
						username: this.username,
						password: this.password
					}
				}
				this.$H.post(url, data).then(res => {
					this.loading=false
					this.$store.commit('login', res)
					// websocket
					this.$store.dispatch('openSocket')
					uni.navigateBack({
						delta: 1
					});
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});
				}).catch(err => {
					this.loading=false
				})
			},
		}
	}
</script>

<style>
	.close {
		height: 100rpx;
		width: 100rpx;
		position: fixed;
		left: 0;
	}
</style>
